延續昨日的部分，把外容器補完

flex-wrap

• flex-wrap：就是換行屬性，當內元件數量超過外容器大小時，就會超出
• 各屬性如下，假設 flex-direction：row
  • nowrap：單行(預設值)
  • wrap：多行，超出的往下換行（因交錯軸為↓)
  • wrap-reverse：多行，超出的往上換行（因交錯軸反轉後為↑)

from：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-flow

• flex-flow：不知是否還記得，在一開始介紹 Flex 的 Day14 時有提到，跟 flex-direction 和 flex-wrap 是一個階層關係，其實就是 2 者的組合
• 前面為 flex-direction，後面為 flex-wrap

CSS

.container {
  flex-flow: column wrap;
}

內元件

• 從之前介紹會發現，調整外容器時內元件都是一起變更的，若想單獨針對內元件進行調整，才需要進行設定
• 內元件 (items)
  • flex：下面 3 個屬性的組合
    • flex-grow：伸展比
    • flex-shrink：收縮比
    • flex-basis：絕對值
  • order：排序
  • align-self：單一物件的交錯軸對齊

目前會先以外容器的參數先進行熟悉，後續有需要再進行補充研究或是連結參考資料的網站

參考資料

• 圖解：CSS Flex 屬性一點也不難
• 深入解析 CSS Flexbox
• 圖解 Flexbox 進階屬性
• A Complete Guide to Flexbox

次回

預計做個簡單的 Flex 練習